<template>
  <div class="nav">
    <!---------------- 菜单栏 ------------------>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-sub-menu index="1">
        <template #title> 路况 </template>
        <el-menu-item index="1-1"><TrafficOpen /></el-menu-item>
        <el-menu-item index="1-2"><TrafficClose /></el-menu-item>
      </el-sub-menu>
      <el-menu-item index="NoticeShow">公告</el-menu-item>
      <el-menu-item v-if="user.role == 0" index="EventReport"
        >事件上报</el-menu-item
      >
      <el-sub-menu index="9">
        <template #title>
          <el-icon :size="20">
            <User />
          </el-icon>
          {{ user.name }}
        </template>
        <el-menu-item index="UserUpdate">修改信息</el-menu-item>
        <el-menu-item index="UserLogout" @click="logout">登出</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>

  <!-- 实时路况图示 -->
  <div class="road-tip" v-show="trafficTip">
    <ul>
      <li>
        畅通
        <div class="item1"></div>
      </li>
      <li>
        拥挤
        <div class="item2"></div>
      </li>
      <li>
        堵塞
        <div class="item3"></div>
      </li>
    </ul>
  </div>
</template>

<script setup>
/* 事件搜索输入框组件 (临时方法) */
// import EventInput from '@/' // 事件搜索输入框
/* 操作地图的组件 (临时方法) */
import TrafficClose from './components/map/traffic/trafficClose.vue' // 路况关闭
import TrafficOpen from './components/map/traffic/trafficOpen.vue' // 路况打开
import { ref, onMounted } from 'vue'
import { useDialogsStore } from '@/stores/dialogs' // 使用pinia
import { useUserStore } from '@/stores/user.js' // 使用pinia
import { ElMessage } from 'element-plus'
import userApi from '@/apis/user.js'
import router from '@/router'

const { dialogs } = useDialogsStore()
const { user } = useUserStore()
const id = localStorage.getItem('userId')
/*
  分析:
    用户类型 (在localstorage里, 从nav组件生命周期里读)
    对话框组件:
        查看公告, 报告事件, 发布公告, 事件审核, 事件管理, 用户管理, 工具箱-导出图片, 输入框, 改密, 登出
    操作地图:
        实时路况*2, 事故多发地*2, 视频监控*2, 工具箱-测量距离, 工具箱-测量面积
          方案1: 同于对话框组件
          方案2: 父组件点击事件 + hook
*/
const activeIndex = ref('1') // 当前激活的菜单项
const trafficTip = ref(false)

/* 挂载 */
onMounted(() => {
  const token = localStorage.getItem('token')

  const id = localStorage.getItem('userId')
  userApi.getById(id).then((res) => {
    // console.log(res.result[0])
    console.log(res, '5555')
    // console.log(res.result[0].user_name)
    user.name = res.result[0].user_name
    user.role = res.result[0].user_type
    user.id = id
  })
})
/*------------- 点击导航 ----------------*/
const handleSelect = (key, keyPath) => {
  switch (key) {
    case 'EventReport': // 事件上报
      dialogs.event.report = true
      break
    case 'NoticeShow': // 公告查看
      dialogs.notice.show = true
      break
    case 'UserUpdate': // 改密
      dialogs.user.update = true
      break
    case '1-1': // 实时路况图示显示
      trafficTip.value = true
      break
    case '1-2': // 实时路况图示关闭
      trafficTip.value = false
      break
  }
}
/* 登出 */
function logout() {
  localStorage.removeItem('token')

  router.push('/login')
  userApi.getById(id).then((res) => {
    console.log(res)
    // res.result[0].user_status = 0
  })
  ElMessage({
    message: '登出',
    type: 'success',
  })
}
</script>

<style scoped>
.nav {
  height: 58px;
}
.flex-grow {
  flex-grow: 1;
}
.search {
  margin-top: 10px;
  margin-right: 30px;
}
.road-tip {
  position: fixed;
  bottom: 130px;
  left: 10px;
  z-index: 999;
}
.road-tip li div {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: rgba(0, 245, 0, 0.8);
}
.road-tip li .item2 {
  background-color: rgba(245, 100, 3, 0.8);
}
.road-tip li .item3 {
  background-color: rgba(255, 0, 0, 0.8);
}
</style>
